<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.card-wrap {
		  width: 100%;
		  height: 188px;
		  position: relative;
		  z-index: -1;
		  overflow: hidden;
		}
		
		.card-wrap:after {
		  width: 140%;
		  height: 168px;
		  position: absolute;
		  left: -20%;
		  top: 0;
		  z-index: -1;
		  content: '';
		  border-radius: 0 0 50% 50%;
		  background: linear-gradient(144deg, #aaaaff 0%, #ff4f66 100%);
		}
		
		.card-box {
		  position: absolute;
		  bottom: 10px;
		  width: 100%;
		}
		.card-info {
		  margin: auto;
		  width: 92%;
		  height: 92px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background: #ffffff;
		  box-shadow: 0 4px 8px 0 rgba(190, 195, 199, 0.5);
		  border-radius: 8px;
		}
	</style>
	<body>
		<div class="card-wrap">
		  <div class="card-box">
		    <div class="card-info">content</div>
		  </div>
		</div>
	</body>
</html>
